<template>
	<view class="big-box flex-col align-center" id="dGoodsHomeId">
		<top-navigation :isFix='true' :isShow="true" bgColor='#BE2225' backIconColor='#FFF'>
		</top-navigation>
		<u-toast ref="uToast"></u-toast>
		<view class="">
			<view class="order-info">
				<view class=" justify-start align-center" style="height: 90rpx;">
					<view class="order-title-one">
						<view class="order-tag center">
							{{info.split_type}}
						</view>
					</view>
					<view class="">
						{{info.usage_time}}
					</view>
				</view>
				<view class="info-sty justify-start align-center">
					<view class="order-title">
						航班号
					</view>
					<view class="order-content">
						{{info.flight_num}}
					</view>
				</view>
				<view class="info-sty justify-start align-center">
					<view class="order-title">
						车型
					</view>
					<view class="order-content">
						{{carType.type || ''}}
					</view>
				</view>
				<view class="info-sty justify-start align-center">
					<view class="order-title">
						出发地
					</view>
					<view class="order-content">
						{{(getArriveType==0 || getArriveType==2) ?info.star_site: info.end_site}}
					</view>
				</view>
				<view class="info-sty justify-start align-center ">
					<view class="order-title">
						下车地点
					</view>
					<view class="order-content ">
						{{(getArriveType==0 || getArriveType==2) ?info.end_site: info.star_site}}
					</view>
				</view>
				<view class="info-sty justify-start align-center">
					<view class="order-title">
						接机人数
					</view>
					<view class="order-content">
						{{info.people_num}} 人
					</view>
				</view>
			</view>
			<view class="user-info">
				<view class="user-title ">
					<view class="user-tits">
						乘车人信息
					</view>
					<view class="line">

					</view>
				</view>
				<view class="user-sty justify-between align-center">
					<view class="user-tit">
						性别
					</view>
					<view class="tab-sex justify-between">
						<view class="tab-item center" @tap="gender=index" v-for="(item,index) in genderList"
							:key="index" :style="{background:index==gender?'#CC1D1D':'#B9B9B9'}">
							{{item.label}}
						</view>

					</view>
				</view>
				<view class="user-sty justify-between align-center border-t-b">
					<view class="user-tit">
						姓名
					</view>
					<view class="user-con">

						<u-input v-model="form.user_name" placeholderStyle='color:#CC1D1D' inputAlign='right' class="info-box" fontSize='26rpx'
							placeholder="请填写姓名" border="none" clearable></u-input>
					</view>
				</view>
				<view class="user-sty justify-between align-center">
					<view class="user-tit">
						联系电话*
					</view>
					<view class="user-con">

						<u-input v-model="form.user_phone" placeholderStyle='color:#CC1D1D' inputAlign='right' class="info-box" fontSize='26rpx'
							placeholder="请填写联系电话" border="none" clearable></u-input>
					</view>
				</view>
			</view>
			<view class="remark">
				<view class="user-title ">
					<view class="user-tits">
						备注信息
					</view>
					<view class="line">

					</view>
				</view>
				<view class="remark-con">
					<u-textarea height='102rpx' border='none' v-model="info.notes" placeholder="请输入备注"></u-textarea>
				</view>
			</view>
		</view>

		<bottom-nav :isDetail='true' :loading='loading' @pay='placeOrder' :detailInfo='carType' :orderInfo='carOrderInfo' :money="money" :distance='distance'></bottom-nav>

	</view>
</template>

<script>
	// import {

	// } from '@/utils/constants.js'
	import {
		arriveType,
	
	} from '@/utils/constants.js'
	import {
		mapState,
		mapActions
	} from 'vuex'
	export default {
		data() {
			return {
				form:{
					user_phone:'',
					user_name:''
				},
				loading:true,
				distance:9,//距离
				money: 0,
				info: {},
				gender: 0,
				code: '',
				content: '',
				remark: '',
				genderList: [{
						val: 0,
						label: '先生'
					},
					{
						val: 1,
						label: '女士'
					},
				]


			}

		},
		computed: {
			...mapState({
				'carOrderInfo': state => state.car.carOrderInfo,
				'carType': state => state.car.carType,
			}),
			//获取服务类型
			getArriveType() {
				return arriveType.find(item=>item.name == this.info.split_type).ind
			},
			calculateStatusBar() {
				return `${this.statusHeight}px`;
			},
			tabsHeight() {
				return `calc(354rpx + (${this.deviceModel?parseInt(this.statusHeight)/2+'rpx':'0rpx'}))`;
			},

		},
		watch: {
			carOrderInfo: {
				handler(v1, v2) {
					console.log('改变', v1);
					this.info = v1
				},
				deep: true,
				immediate: true,
			}
		},
		onLoad() {
		
			console.log(this.carOrderInfo);
			this.getCalcDistance()
			
			
		},
		onShow() {

		},
		methods: {
			...mapActions(['getDetailSome', 'applyOrder','getAirList','RoutePlanning']),
			async placeOrder() {
				let _this = this
				let content = {
					"split_type": this.carType.split_type,
					// "flight_num": "cz007",//有了
					// "usage_time": "2024-01-29 12:08",//有了
					"vehicle_id": this.carType.id,
					"vehicle_model": this.carType.type,
					"day_price": "",
					"carry_num": this.carType.carry_num,
					// "star_site": "沈阳桃仙国际机场",//有了
					// "end_site": "AIRIQI(龙之梦购物中心店)",//有了
					"distance":[this.distance],
					// "people_num": "1",//有了
					// "notes": "",//有了
					"price": _this.money,
					"sex": this.gender,
					...this.info,
					...this.form,
					// "user_name": "齐",//有了
					// "user_phone": "19818843948"//有了
				}
				wx.login({
					async success(res) {
						if (res.code) {
							//发起网络请求
							let resq = await _this.applyOrder({
								code: res.code,
								type: 'car',
								type_id: _this.carType.id,
								content_id: 0,
								price: _this.money,
								content:JSON.stringify(content)
							})
							_this.$navto('/car/order/order-detail?order_id='+resq.order_id+'&place=1')
						} else {
							uni.$toast('下单失败,请重试')
						}
					}
				})



		

			},
			async getCalcDistance(){
				let distance = await this.RoutePlanning(this.carOrderInfo)
				this.distance = distance
				// 获取订单里程
				this.getOrderDistance()
			},
			async getOrderDistance() {
				// await RoutePlanning()
				//获取经纬度计算latitude 41.803324,longitude123.471079
				let res = await this.getDetailSome({
					vehicle_id: this.carType.id,
					type: 0,
					detail_type: this.getArriveType, //接机送机
					distance: this.distance //单位m

				})
				console.log('res', res);
				this.money = res.price
				this.loading = false
			},
			foodPay() {
				this.$navto('/car/order/order-status?order_id=')
			}
		},
	}
</script>
<style>
	@import '/common/css/common.css';
</style>
<style lang="scss" scoped>
	.big-box {
		width: 100vw;
		padding: 0 0 179rpx 0;
		min-height: 100vh;
		background: rgba(243, 243, 243, 0.95);

		.order-info {
			margin: 40rpx 0 25rpx;
			width: 670rpx;
			height: 541rpx;
			padding: 0 33rpx;
			background: #FFFFFF;
			box-shadow: 0rpx 4rpx 10rpx 0rpx rgba(108, 108, 108, 0.1);
			border-radius: 20rpx 20rpx 20rpx 20rpx;

			.order-title-one {
				width: 112rpx;
				margin-right: 49rpx;

				.order-tag {
					width: 82rpx;
					height: 44rpx;
					background: #D83F3F;
					border-radius: 10rpx 10rpx 10rpx 10rpx;
					font-family: Source Han Sans SC, Source Han Sans SC;
					font-weight: 400;
					font-size: 28rpx;
					color: #FFFFFF;
				}
			}

			.info-sty {
				height: 90rpx;
				border-top: 1rpx solid rgba(0, 0, 0, 0.1);
			}

			.order-title {
				width: 112rpx;
				margin-right: 49rpx;
				font-family: Source Han Sans SC, Source Han Sans SC;
				font-weight: 400;
				font-size: 28rpx;
				color: #8E8E8E;
			}

			.order-content {
				flex: 1;
				font-family: Source Han Sans SC, Source Han Sans SC;
				font-weight: 400;
				font-size: 32rpx;
				color: #000000;
			}
		}

		.user-title {
			margin-bottom: 9rpx;
			width: max-content;
			position: relative;
			font-family: Source Han Sans SC, Source Han Sans SC;
			font-weight: 400;
			font-size: 36rpx;
			color: #000000;
			z-index: 1;

			.line {
				position: absolute;
				bottom: -2rpx;
				left: 50%;
				transform: translate(-50%, 0);
				width: 147rpx;
				height: 6rpx;
				background: linear-gradient(180deg, #FFFFFF 3%, #F2DCBE 24%, #CF9952 91%);
				border-radius: 0rpx 10rpx 0rpx 10rpx;
			}

			.user-tits {
				position: relative;
				z-index: 2;
			}


		}

		.user-info {
			margin-bottom: 25rpx;
			padding: 32rpx 30rpx 0;
			width: 670rpx;
			height: 347rpx;
			background: #FFFFFF;
			box-shadow: 0rpx 4rpx 10rpx 0rpx rgba(108, 108, 108, 0.1);
			border-radius: 20rpx 20rpx 20rpx 20rpx;

			.line {
				position: absolute;
				bottom: -2rpx;
				left: 50%;
				transform: translate(-50%, 0);
				width: 189rpx;
				height: 6rpx;
				background: linear-gradient(180deg, #FFFFFF 3%, #F2DCBE 24%, #CF9952 91%);
				border-radius: 0rpx 10rpx 0rpx 10rpx;
			}


			.border-t-b {
				border-top: 1rpx solid rgba(0, 0, 0, 0.1);
				border-bottom: 1rpx solid rgba(0, 0, 0, 0.1);
			}

			.user-sty {
				height: 90rpx;

				.user-tit {
					font-family: Source Han Sans SC, Source Han Sans SC;
					font-weight: 400;
					font-size: 28rpx;
					color: #8E8E8E;
				}

				.tab-sex {
					width: 194rpx;
					height: 57rpx;
					border-radius: 10rpx 10rpx 10rpx 10rpx;
					overflow: hidden;

					.tab-item {
						font-family: Source Han Sans SC, Source Han Sans SC;
						font-weight: 500;
						font-size: 30rpx;
						color: #FFFFFF;
						flex: 1;

					}
				}

				.user-con {
					font-family: Source Han Sans SC, Source Han Sans SC;
					font-weight: 400;
					font-size: 28rpx;
					color: #CC1D1D;
				}
			}
		}

		.remark {
			padding: 32rpx 30rpx 0;
			width: 670rpx;
			height: 222rpx;
			background: #FFFFFF;
			box-shadow: 0rpx 4rpx 10rpx 0rpx rgba(108, 108, 108, 0.1);
			border-radius: 20rpx 20rpx 20rpx 20rpx;

			.remark-con {
				// padding: 19rpx 21rpx;
				// margin-top: 20rpx;
				width: 610rpx;
				background: #F0F0F0;
				box-shadow: inset 0rpx 0rpx 10rpx 0rpx rgba(0, 0, 0, 0.05);
				border-radius: 10rpx 10rpx 10rpx 10rpx;
				font-family: Source Han Sans SC, Source Han Sans SC;
				font-weight: 400;
				font-size: 28rpx;
				color: #000000;
			}
		}




	}
</style>